<!-- 菜单项配置 -->
<template>
	<section>
		<el-table ref="menusTable" border :data="menusTable" row-key="id" :tree-props="{children: 'child'}" :cell-style="cellStyle" :header-cell-style="rowClass">
			<el-table-column prop="name" align="center" label="菜单" :formatter="formatSex">
			</el-table-column>
			<el-table-column prop="menu_name" align="center" label="列表">
			</el-table-column>
			<el-table-column prop="operation" label="操作">
				<template slot-scope="scope">
					<el-button v-if="scope.row.child" type="success" size="mini" @click="dialogVisible = true">添加</el-button>
					<el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button v-if="!scope.row.child" type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--添加界面-->
		<el-dialog title="添加菜单" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="菜单名称" prop="menu_name">
					<el-input v-model="addForm.menu_name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="菜单url" prop="menu_url">
					<el-input v-model="addForm.menu_url" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="菜单序号" prop="sort_no">
					<el-input v-model="addForm.sort_no" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="菜单级别" prop="menu_level">
					<el-radio-group v-model="addForm.menu_level">
						<el-radio class="radio" :label="1">一级菜单</el-radio>
						<el-radio class="radio" :label="0">二级菜单</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary"  @click.native="addSubmit"  :loading="loading">确定</el-button>
			</span>
		</el-dialog>
		<!--编辑界面-->
		<el-dialog title="修改菜单" :visible.sync="editFormVisible" width="50%" :before-close="handleClose">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="菜单名称" prop="menu_name">
					<el-input v-model="editForm.menu_name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="菜单url" prop="menu_url">
					<el-input v-model="editForm.menu_url" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="菜单序号" prop="sort_no">
					<el-input v-model="editForm.sort_no" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="loading">确定</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import util from '../../../common/js/util'
	import {
		menu,
		addMenu,
		editMenu,
		delMenu,
		submenuList,
		Refreshtoken
	} from '../../../api/api';
	export default {
		data() {
			return {
				loading: false,
				defaultProps: {
					children: 'children',
					label: 'title'
				},
				// 菜单表格结构数据
				menusTable: [],
				dialogVisible: false,
				editFormVisible:false,
				//新增界面数据
				addForm: {
					menu_name: '',
					menu_url: '',
					sort_no:'',
					menu_level: -1
				},
				editForm: {
					menu_name: '',
					menu_url: '',
					sort_no:'',
					menu_level: -1
				},
				addFormRules: {
					menu_name: [{
						required: true,
						message: '请输入菜单名称',
						trigger: 'blur'
					}],
					menu_url: [{
						required: true,
						message: '请输入菜单URL',
						trigger: 'blur'
					}],
					sort_no: [{
						required: true,
						message: '请输入随机数字',
						trigger: 'blur'
					}],
					menu_level: [{
						required: true,
						message: '请选择菜单级别',
						trigger: 'blur'
					}]
				},
				editFormRules: {
					menu_name: [{
						required: true,
						message: '请输入菜单名称',
						trigger: 'blur'
					}],
					sort_no: [{
						required: true,
						message: '请输入随机数字',
						trigger: 'blur'
					}],
				},
			}
		},
		mounted() {
			var Token = sessionStorage.getItem('Token');
			var timestamp=new Date().getTime();
			let para = {
				token: Token,
				timestamp: timestamp
			};
			this.loading = true;
			menu(para).then((res) => {
				var res = res.data;
				if (res.code != 0) {
					this.$message({
						message: res.message,
						type: 'error'
					});
				} else {
					this.menusTable = res.data;
					this.loading = false;
				}
			});

			// this.queryInfo();
			// this.timer = setInterval(() => {
			//    setTimeout(this.queryInfo, 0)
			// }, 600000)
		},
		methods: {
			// 转换菜单状态
			formatSex: function (row, column) {
				return row.menu_level == 1 ? '一级菜单' : row.menu_level == 0 ? '二级菜单' : '未知';
			},
			cellStyle({row, column}){
				return 'text-align:center';
			},
			rowClass({row, column}){
				return 'text-align:center';
			},
			// 添加角色
			handleClose(done) {
				this.$confirm('确认关闭？')
				    .then(_ => {
						done();
					})
					.catch(_ => {});
			},
			//添加角色提交
			addSubmit: function() {
				let upId = '';
				this.$refs.addForm.validate((valid) => {
					if (this.addForm.menu_level == 1) {
						upId = 1
					} else if(this.addForm.menu_level == 0){
						upId = 2
					}
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.loading = true;
							var Token = sessionStorage.getItem('Token');
							var timestamp=new Date().getTime();
							let para =Object.assign({ token: Token, timestamp:timestamp,up_id:upId}, this.addForm);
							addMenu(para).then((res) => {
								this.loading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.dialogVisible = false;
								this.getMenu();
							});
						});
					}
				});
			},
			// 修改菜单
			handleEdit(index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.loading = true;
							var Token = sessionStorage.getItem('Token');
							var timestamp=new Date().getTime();
							let para = Object.assign({token: Token, timestamp:timestamp,}, this.editForm);
							editMenu(para).then((res) => {
								this.loading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getMenu();
							});
						});
					}
				});
			},
			// 删除角色
			handleDelete(index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.loading = true;
					var Token = sessionStorage.getItem('Token');
					var timestamp=new Date().getTime();
					let para = {token: Token, timestamp:timestamp,ids: row.id };
					delMenu(para).then((res) => {
						this.loading = false;
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getMenu();
					});
				}).catch(() => {
				
				});
			},
			getMenu:function(){
				var Token = sessionStorage.getItem('Token');
				var timestamp=new Date().getTime();
				let para = {
					token: Token,
					timestamp: timestamp
				};
				this.loading = true;
				menu(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.menusTable = res.data;
						this.loading = false;
					}
				});
			}
		}
	}
</script>
<style scoped>
	
</style>
